<template>
  <div class="staff-constitute">
    <div class="title-wrap">{{ title }}</div>
    <div class="tree-wrap my-scrollbar">
      <a-tree
        v-bind="$attrs"
        v-model:selected-keys="selectedKeys"
        block-node
        class="tree"
        :tree-data="treeData"
        :field-names="{ children: 'children', title: 'orgName', key: 'id' }"
        @select="onTreeSelect"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { TreeProps } from 'ant-design-vue/es/tree'
  import { ref } from 'vue'
  import { useRequest } from 'vue-request'

  import { teacherManageApi } from '@/services/api/aigc-admin'
  export interface StaffConstituteProps extends TreeProps {
    title?: string
  }

  withDefaults(defineProps<StaffConstituteProps>(), {
    title: '人员组织'
  })

  const selectedKeys = defineModel<string[] | number[]>('selectedKeys')

  const emits = defineEmits<(e: 'treeSelect', selectedKeys: any[]) => void>()

  const treeData = ref<TreeProps['treeData']>([])
  const { refresh } = useRequest<any>(teacherManageApi.getOrganizationTree, {
    onSuccess({ data }) {
      treeData.value = data
    }
  })
  refresh()

  const onTreeSelect = (selectedKeys: any[]) => {
    emits('treeSelect', selectedKeys)
  }
</script>

<style lang="less" scoped>
  .staff-constitute {
    display: flex;
    padding: 16px 20px 16px 16px;
    width: 276px;
    height: 720px;
    min-height: 0;
    background: #fafafa;
    border-radius: 4px;
    flex-direction: column;
    gap: 12px 0;

    .title-wrap {
      font-size: 14px;
      color: rgba(17, 22, 31, 0.52);
      font-weight: 700;
      line-height: 22px;
    }

    .tree-wrap {
      overflow-x: auto;
      width: 100%;
      background: #fafafa;

      :deep(.ant-tree) {
        background: #fafafa;
        border-radius: 0;
      }
    }
  }
</style>
